<template>
  <div>
    <section class="ui-container">
      <div class="ui-form">
        <div class="ui-form-item ui-form-item-show ui-border-b">
          <label><span class="label_span">*</span>姓名</label>
          <input type="text" placeholder="请输入姓名" v-model="username1"/>
        </div>
        <div class="ui-form-item ui-form-item-show ui-border-b">
          <label><span class="label_span">*</span>手机号码</label>
          <input type="text" placeholder="请输入手机号码" v-model="userphone"/>
        </div>
        <div class="ui-form-item ui-form-item-show ui-border-b">
          <label><span class="label_span">*</span>身份证号</label>
          <input type="text" placeholder="请输入身份证号" v-model="usercode"/>
        </div>
        <div class="ui-form-item ui-border-b" style="padding-bottom: 6px;">
          <label style="line-height: 22px;">
            <span class="label_span">*</span>是否为当前<br/>时间及地点
          </label>
          <label class="ui-radio" style="float: left;margin: 8px 0 0 92px;">
            <input type="radio" name="istimeaddr" class="ui-radio-input1" id="istimeaddr1" @click="istimeaddr1"
                   checked/>是
            <input type="radio" name="istimeaddr" class="ui-radio-input2" id="istimeaddr2" @click="istimeaddr2"
                   style="margin-left: 10px;"/>否
          </label>
        </div>
        <div class="ui-form-item ui-form-item-show ui-border-b" style="overflow-x: hidden;">
          <label><span class="label_span">*</span>事发时间</label>
          <input type="text" id="appDateTime" v-model="datenownew" placeholder="请输入事发时间"/>
          <input type="text" style="position: absolute;top: 11px;" class="ui_form_inpt" readonly :value="datenownew"/>
        </div>
        <div id="tureIStime">
          <div class="ui-form ui-border-t" style="width: 100%; margin-top: -1px;position: relative;z-index: 2;">
            <div class="ui-form-item ui-form-item-show ui-border-b" style="position: initial; overflow-x: hidden;">
              <label><span class="label_span">*</span>事发地点</label>
              <div class="jl_sj" style="padding:0 15px 0 90px;">
                <div class="jl_sj_zz"></div>
                <div class="shiju_lf" id="citycheckbox">昆明市</div>
                <ul class="shiju_lf_xl">
                  <li>曲靖市</li>
                  <li>玉溪市</li>
                  <li class="li1">保山市</li>
                  <li>昭通市</li>
                  <li>丽江市</li>
                  <li>思茅市</li>
                  <li class="li1">临沧市</li>
                  <li>文山州</li>
                  <li>红河州</li>
                </ul>
                <div class="shiju_lf shiju_lf1" id="districtcheckbox">西山区</div>
                <ul class="shiju_lf_xl shiju_lf_xl1">
                  <li>曲靖市</li>
                  <li>玉溪市</li>
                  <li>保山市</li>
                  <li>昭通市</li>
                  <li>丽江市</li>
                  <li>思茅市</li>
                  <li>临沧市</li>
                  <li>文山州</li>
                  <li>红河州</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="ui-form-item ui-form-item-show ui-border-b">
            <input type="text" style="padding-left: 0;" placeholder="请输入事发地点" id="dz_inpt" v-model="inptaddr">
          </div>
        </div>
        <div id="falseIStime">
          <div class="ui-form-item ui-form-item-textarea ui-border-b" style="height: 100px;position: relative;">
            <label>
              <span class="label_span">*</span>事发地点
            </label>
            <textarea placeholder="请输入事发地点" readonly style="height: 75px;" :maxlength="bjmaxlength"
                      id="dz_inpt1" v-model="inpt1addr"></textarea>
          </div>
        </div>
        <div class="ui-form-item ui-border-b" style="padding-bottom: 6px;">
          <label style="line-height: 22px;"><span class="label_span">*</span>是否方便<br/>接听来电</label>
          <label class="ui-radio" style="float: left;margin: 8px 0 0 92px;">
            <input type="radio" name="isphone" id="isphone1" @click="isphoneclick1"/>是
            <input type="radio" name="isphone" checked="checked" style="margin-left: 10px;" id="isphone2"
                   @click="isphoneclick0"/>否
          </label>
        </div>
        <div class="ui-form-item ui-form-item-textarea ui-border-b" style="height: 100px;position: relative;">
          <label>
            <span class="label_span">*</span>报警内容
          </label>
          <textarea placeholder="请输入报警内容" style="height: 75px;" :maxlength="bjmaxlength" id="crcontentid"
                    v-model="crcontent"></textarea>
        </div>

        <ul class="ul_lost">
          <li>
            <h1 class="h1_text" style="color: #666; font-size: 16px;margin: 0px 10px; ">
              报警资料上传<span class="red">（选填）</span></h1>
          </li>
        </ul>
        <div style="width: 100%;float: left;margin-bottom: 20px;">
          <div class="weui_cells weui_cells_form" style="margin-top: 0px;">
            <div class="weui_cell">
              <div class="weui_cell_bd weui_cell_primary">
                <div class="weui_uploader">
                  <div class="weui_uploader_hd weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">图片上传<span class="red">（单张图片不能大于5M）</span></div>
                    <div class="weui_cell_ft"></div>
                  </div>
                  <div class="weui_uploader_bd" style="margin-top: 10px;">
                    <ul class="weui_uploader_files">
                      <li class="weui_uploader_file"
                          style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
                        <div class="sxsb_close" @click="closesxsb(this)"></div>
                      </li>
                      <li class="weui_uploader_file"
                          style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
                        <div class="sxsb_close"></div>
                      </li>
                    </ul>
                    <div class="weui_uploader_input_wrp">
                      <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"
                             multiple="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="weui_cells weui_cells_form" style="margin-top: 0px;">
            <div class="weui_cell">
              <div class="weui_cell_bd weui_cell_primary">
                <div class="weui_uploader">
                  <div class="weui_uploader_hd weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">录音上传<span class="red">（1M以内）</span></div>
                    <div class="weui_cell_ft"></div>
                  </div>
                  <div class="weui_uploader_bd" style="margin-top: 10px;">
                    <ul class="weui_uploader_files">
                    </ul>
                    <div class="wxbj_lysc1">
                      <img src="./images/bofang.png" id="bofang"/>
                    </div>
                    <div class="wxbj_lysc">
                      <img src="./images/wxbj_scly.png" id="wxbj_lysc_img"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="weui_cells weui_cells_form" style="margin-top: 0px;">
            <div class="weui_cell">
              <div class="weui_cell_bd weui_cell_primary">
                <div class="weui_uploader">
                  <div class="weui_uploader_hd weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">视频上传<span class="red">（20M以内）</span></div>
                    <div class="weui_cell_ft"></div>
                  </div>
                  <div class="weui_uploader_bd" style="margin-top: 10px;">
                    <ul class="weui_uploader_files">
                    </ul>
                    <div class="wxbj_spsc">
                      <img src="./images/wxbj_scsp.png"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ui-btn-wrap">
        <button class="ui-btn-lg ui-btn-primary" @click="SaveInfo">
          {{SaveName1}}
        </button>
      </div>
      <!--弹出框一-->
      <div class="lysc_pup" id="lysc_pup1">
        <div class="lysc_pup_top">开始录音</div>
        <div class="lysc_pup_text">点击确定，开始录音。</div>
        <div class="lysc_pup_btn">
          <div class="btn_lf" id="btn_lf1">取消</div>
          <div class="btn_rt" id="btn_rt1">确认</div>
        </div>
      </div>
      <!--弹出框二-->
      <div class="lysc_pup" id="lysc_pup2">
        <div class="lysc_pup_top">录音中</div>
        <div class="lysc_pup_text">点击确定，录音结束。</div>
        <div class="lysc_pup_miao">55</div>
        <div class="lysc_pup_btn1" id="btn_lf2">
          确认
        </div>
      </div>
      <!--弹出框三-->
      <div class="lysc_pup" id="lysc_pup3">
        <div class="lysc_pup_top">录音完成</div>
        <div class="lysc_pup_text">确认要上传该录音？</div>
        <div class="lysc_pup_btn">
          <div class="btn_lf" id="btn_lf3">取消</div>
          <div class="btn_rt" id="btn_rt3">确认</div>
        </div>
      </div>
      <!--播放弹出框-->
      <div class="lysc_pup" id="lysc_pup4">
        <div class="lysc_pup_top">提示</div>
        <div class="lysc_pup_text" id="lysc_pup_text">播放或删除录音？</div>
        <div class="lysc_pup_btn">
          <div class="btn_lf" id="btn_lf4">删除</div>
          <div class="btn_rt" id="btn_rt4">播放</div>
        </div>
      </div>
      <!--遮罩-->
      <div id="zhezhao"></div>
    </section>
  </div>
</template>

<script>
  import  './css/frozen.css'
  import  './css/weui.css'
  import  './css/main.css'
  import  './css/mobiscroll_002.css'
  import  './js/mobiscroll_002'
  import  './js/mobiscroll_004'
  import  './js/mobiscroll'
  import  './js/mobiscroll_003'
  import  './js/mobiscroll_005'
  import  './js/index'
  import  './js/qqdt/geolocation.min'
  import {Search, XButton, Divider, Cell, CellBox, Group, dateFormat} from 'vux'
  export default {
    data(){
      return {
        SaveName1: '提交',
        bjmaxlength: '200',//报警内容文字个数限制
        options: {timeout: 30000},
        geolocation: new qq.maps.Geolocation("JY3BZ-2JK3G-OV6QU-IWRF5-UE3X3-YIB5O", "myapp"),
        qqmodel: {
          accuracy: '',
          lat: '',
          lng: '',
          city: '',
          district: '',
          adcode: '',
          nation: '',
          province: '',
          type: '',
          addr: ''
        },
        username1: '',
        userphone: '',
        usercode: '',
        istimeaddr: '',
        address: '',
        datenownew: dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss'),
        citynew: '',
        districtnew: '',
        addrnew: '',
        lngnew: '',
        latnew: '',
        isphone: '',
        crcontent: '',
        toorgid: '530100000000',
        comno: '',
        inptaddr: '',
        inpt1addr: ''
      }
    },
    mounted(){
      this.istimeaddr1();
    },
    methods: {
      //提交信息
      SaveInfo() {
        let self = this;
        console.log(self.username1);
        console.log(self.qqmodel.city);
        console.log(self.qqmodel);
        console.log(self.qqmodel.lng);
        let apiurl = global.appHubApiUrl;
        this.axios({
          method: 'get',
          url: apiurl + '/apphub/getInstance/?deptNo=' + self.toorgid
        }).then(function (response) {
            if (response.data.code = 200) {
              self.comno = response.data.code.msg;
            }
            else {
              self.comno = '';
            }
          }
        );
        console.log("comno:" + self.comno);
        let data1 = {
          ADDRESS: self.address,
          CRCONTENT: self.crcontent,
          ISPHONE: self.isphone,
          USERCODE: self.usercode,
          USERNAME: self.username1,
          USERPHONE: self.userphone,
          USERADDRESS: '',
          UNITCONTACTOR: '',
          HANDPHONE: '',
          TOORGID: self.toorgid,
          TOORGNAME: '云南省指挥中心',
          COMNO: self.comno,
          OPENID: '',
          EARTH_LONG: self.lngnew,
          EARTH_LAT: self.latnew,
          STATE: 0,
          ALAMSTATE: 0
        };
        this.axios({
          method: 'post',
          url: apiurl + "/apphub/insert-callpolice",
          data: data1
        }).then(function (response) {
            if (response.data.code == 200) {
              self.$router.push('/CallPoliceSuccess');
            }
            else {
              alert('保存失败！');
            }
            console.log(response);
          }
        );
      },
      //上传视频
      upvideo(){

      },
      //删除图片
      closesxsb(obj)
      {
        console.log(obj);
      },
      //是否当前时间及地点-是
      istimeaddr1()
      {
        console.log("是当前时间及地点");
        $("#tureIStime").hide();
        $("#falseIStime").show();
        this.istimeaddr = '1';
        //精准定位
        this.geolocation.getLocation(this.showPosition, this.showErr, this.options);
        console.log(this.address);
      },
      //是否当前时间及地点-否
      istimeaddr2()
      {
        console.log("否当前时间及地点");
        $("#tureIStime").show();
        $("#falseIStime").hide();
        this.istimeaddr = '0';
        this.citynew = "云南省";
        this.districtnew = "昆明市";
        this.address = this.citynew + this.districtnew + this.inptaddr;
        this.lngnew = '';
        this.latnew = '';
        console.log(this.address);
      },
      isphoneclick0()
      {
        console.log("否接电话");
        this.isphone = '0';
      },
      isphoneclick1()
      {
        console.log("是接电话");
        this.isphone = '1';
      },
      //<--定位方法Start-->
      showPosition(position) {
        $("#dz_inpt1").val(position.addr);
        this.qqmodel = position;
        this.citynew = this.qqmodel.city;
        this.districtnew = this.qqmodel.district;
        this.lngnew = this.qqmodel.lng;
        this.latnew = this.qqmodel.lat;
        this.address = this.qqmodel.city + this.qqmodel.district + this.qqmodel.addr;
      },
      showErr() {
        console.log("定位开始");
        $("#dz_inpt1").val("定位失败！");
      },
      showWatchPosition()
      {
        console.log("监听开始");
        this.geolocation.watchPosition(showPosition);
      },
      showClearWatch() {
        this.geolocation.clearWatch();
        console.log("监听结束");
      }
      //<--定位方法END-->
    }
  }
</script>

<style lang="less" scoped>
  h3 {
    font-size: 18px;
    padding: 5px;
    border-bottom: 1px solid #D9D9D9;
    margin-bottom: 15px;
  }

  p {
    line-height: 24px;
    margin-bottom: 5px;
  }

  .ui-form-item {
    padding-left: 20px;
  }

  textarea {
    resize: none;
  }

  .ui-form-item-show label {
    color: #000;
  }

  .ui-form-item input {
    color: #333;
  }

  .ui-form-item-textarea textarea {
    margin-top: 11px;
  }

  /*上传附件*/
  .weui_uploader_bd {
    overflow: inherit;
  }

  .weui_uploader_file {
    position: relative;
  }

  .weui_cells:before {
    border-top: 0px;
  }

  .red {
    color: #F80000;
    font-size: 14px;
  }
</style>
